<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="container">
        <div class="nav">
          <navigation :msg="navMsg"></navigation>
        </div>
        <div class="content">
          <div class="head">
            <div class="el">
              <div class="div">
                <el-input size="mini" clearable placeholder="请输入登录账号/姓名/手机号" v-model="input1">
                  <el-button size="mini" slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
              <el-select size="mini" clearable v-model="value" placeholder="请选择部门">
                <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                  <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-option-group>
              </el-select>
              <el-select size="mini" clearable v-model="value1" placeholder="请选择账号状态">
                <el-option
                  v-for="item in optionss"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div class="tree-list-top-right">
              <span style="cursor: pointer;" class="iconfont icon-test214 left"></span>
              <span style="cursor: pointer;margin-left:10px;color:#20ADE5;">新增</span>
            </div>
          </div>
          <div class="account">
            <el-table
              :data="tableData"
              style="width: 100%"
              :default-sort="{prop: 'date', order: 'descending'}"
            >
              <el-table-column prop="serialNumber" label="序号" width="120"></el-table-column>
              <el-table-column prop="name" label="姓名" sortable width="250"></el-table-column>
              <el-table-column prop="loginAccount" label="登录账号" width="120"></el-table-column>
              <el-table-column prop="number" label="编号" width="120"></el-table-column>
              <el-table-column prop="department" label="部门" width="120"></el-table-column>
              <el-table-column prop="position" label="职位" width="120"></el-table-column>
              <el-table-column prop="phone" label="手机" width="120"></el-table-column>
              <el-table-column prop="permissions" label="数据权限" width="120"></el-table-column>
              <el-table-column prop="role" label="角色" width="200"></el-table-column>
              <el-table-column prop="status" label="账号状态" width="120"></el-table-column>
              <el-table-column width="-1">
                <div class="caozuo">
                  <el-button size="mini" @click="handleEdit()">编辑</el-button>
                  <el-button size="mini" @click="handleDelete()">删除</el-button>
                </div>
              </el-table-column>
            </el-table>
          </div>
          <div class="page">
            <Paging :msg="50" @pageNum="getPageNum" @pageId="getPageId"></Paging>
          </div>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import Paging from '@/components/common/paging/Paging'
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import navigation from '@/components/common/navigation/Navigation'
export default {
  data () {
    return {
      tableData: [
        {
          serialNumber: 1,
          name: '小云',
          loginAccount: 'SR18576689620',
          number: 'S_0021',
          department: '综合管理部门',
          position: '码农',
          phone: '17150311484',
          permissions: '我负责的',
          role: '销售',
          status: '禁用'
        },
        {
          serialNumber: 2,
          name: '小园',
          loginAccount: 'SR18576689620',
          number: 'S_0021',
          department: '综合管理部门',
          position: '码农',
          phone: '17150311484',
          permissions: '我负责的',
          role: '销售',
          status: '禁用'
        },
        {
          serialNumber: 3,
          name: '小源',
          loginAccount: 'SR18576689620',
          number: 'S_0023',
          department: '仓库',
          position: '码农',
          phone: '17150311484',
          permissions: '全部客户',
          role: '销售，审单',
          status: '启用'
        },
        {
          serialNumber: 4,
          name: '小云',
          loginAccount: 'SR18576689620',
          number: 'S_0021',
          department: '综合管理部门',
          position: '码农',
          phone: '17150311484',
          permissions: '我负责的',
          role: '销售',
          status: '禁用'
        },
        {
          serialNumber: 5,
          name: '小云',
          loginAccount: 'SR18576689620',
          number: 'S_0021',
          department: '综合管理部门',
          position: '码农',
          phone: '17150311484',
          permissions: '我负责的',
          role: '销售',
          status: '禁用'
        }

      ],
      input1: '',
      optionss: [{
        value: '启用',
        label: '启用'
      }, {
        value: '禁用',
        label: '禁用'
      }],
      value1: '',
      options: [{
        label: '销售部',
        options: [{
          value: '渠道1部',
          label: '渠道1部'
        }, {
          value: '渠道2部',
          label: '渠道2部'
        }]
      }, {
        label: '仓库',
        options: [{
          value: '渠道2部',
          label: '渠道2部'
        }]
      }, {
        label: '综合管理部',
        options: [{
          value: '销售1',
          label: '销售1'
        }]
      }],
      value: '',
      navMsg: [
        {
          name: '设置',
          path: '/enterpriseInformation'
        },
        {
          name: '员工账号',
          path: ''
        }
      ]
    }
  },
  created () { },
  methods: {
    getPageId (id = 1) {
      this.pageId = id
    },
    getPageNum (num) {
      this.pageNum = num
      this.getPageId()
    },
    handleEdit (index, row) {
    },
    handleDelete (index, row) {
    }

  },
  components: {
    VCommonHeaderLeft,
    navigation,
    Paging
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin-right: 10px;
  .content {
    width: 100%;
    height: 640px;
    background-color: #fff;
    position: relative;
    .head {
      display: flex;
      padding: 15px 20px;
      justify-content: space-between;
      .el {
        display: flex;
        .div {
          display: flex;
          /deep/ .el-input--suffix {
            width: 250px;
            font-size: 12px;
            /deep/ .el-input__inner {
              border-radius: none !important;
            }
          }
          .el-button {
            border: none;
            border-radius: none !important;
            height: 25px;
            width: 50px;
            background-color: #fff;
            font-size: 16px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: 0px;
            &:hover {
              background-color: #f1f8ff;
              color: #20ade5;
            }
          }
        }
        .el-select {
          width: 180px;
          margin-left: 10px;
        }
      }
    }
    .account {
      /deep/ table {
        thead {
          tr {
            th:first-child {
              text-align: center;
            }
            th {
              font-size: 12px;
              font-weight: 400;
              padding: 5px 0;
              border-top: 1px #f3f3f3 solid;
              background-color: #fcfcfc;
            }
          }
        }
        tbody {
          tr {
            position: relative;
            td {
              font-size: 12px;

              &:first-child {
                text-align: center;
              }
              /deep/ .cell {
                .caozuo {
                  display: none;
                  position: absolute;
                  top: 10px;
                  right: 30px;
                  .el-button {
                    color: #fff;
                    background-color: #a3bbd4;
                    margin-left: 0px;
                  }
                }
              }
              &:last-child {
                width: 0px;
              }
            }
            &:hover {
              td {
                /deep/ .cell {
                  .caozuo {
                    display: flex;
                  }
                }
              }
            }
          }
        }
      }
    }
    .page {
      border: 1px solid #e3e3;
      position: absolute;
      bottom: 0px;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
  }
}
</style>
